import { Tooltip, Layout } from 'antd';
import {
  GithubOutlined,
  InfoCircleOutlined,
  WechatOutlined,
} from '@ant-design/icons';
import React from 'react';

const Links = [
  {
    key: 'github',
    title: (
      <Tooltip title='查看本站技术及源码，欢迎 star'>
        <div className='flex items-center'>
          <GithubOutlined /> 支持项目
        </div>
      </Tooltip>
    ),
    href: 'https://gitee.com/csu_xzy/smart-aifront',
    blankTarget: true,
  },
  {
    key: 'contact',
    title: (
      <Tooltip
        title={
          <img
            src='https://csuxzy-1300770696.cos.ap-guangzhou.myqcloud.com/wechat.jpeg'
            alt='微信 code_nav'
            width='200'
          />
        }>
        <div className='flex items-center'>
          <WechatOutlined /> 联系作者
        </div>
      </Tooltip>
    ),
    href: 'http://csu_xzy.gitee.io/stadu-nav-doc/#/?id=%e5%85%b3%e4%ba%8e%e4%bd%9c%e8%80%85',
    blankTarget: true,
  },
  {
    key: 'info',
    title: (
      <div className='flex items-center'>
        <InfoCircleOutlined /> 免责声明
      </div>
    ),
    href: 'http://csu_xzy.gitee.io/stadu-nav-doc/#/?id=%e5%85%8d%e8%b4%a3%e5%a3%b0%e6%98%8e',
    blankTarget: true,
  },
] as const;

const GlobalFooter: React.FC = () => {
  const { Footer } = Layout;
  const goToLink = (item: IAnyObject) => {
    window.open(item.href, `${item.blankTarget ? '_blank' : ''}`);
  };
  return (
    <Footer className='h-3 bg-smart-gray'>
      <div className='w-full h-full flex justify-center flex-col items-center text-text-gray'>
        <div className='flex w-80 justify-around items-center hover:cursor-pointer'>
          {Links.map((item) => {
            return (
              <div key={item.key} onClick={() => goToLink(item)}>
                {item.title}
              </div>
            );
          })}
        </div>
        <div>©2023 智能AI | 湘ICP备2021020539号-1</div>
      </div>
    </Footer>
  );
};

export default GlobalFooter;
